"use server";
import { getQuestionBankVoByIdUsingGet } from "@/api/questionBankController";
import { getQuestionVoByIdUsingGet } from "@/api/questionController";
import QuesionCard from "@/components/QuestionCard";
import type { MenuProps } from "antd";
import { Flex, Menu } from "antd";
import Sider from "antd/es/layout/Sider";
import { Content } from "antd/es/layout/layout";
import Title from "antd/es/typography/Title";
import "./index.css";
import Link from "next/link";

interface Params {
  questionBankId: string;
  questionId: string;
}
/**
 * 题库题目详情页面
 * @returns 题库题目详情页面
 */
const BankQuestionPage: React.FC<{ params: Params }> = async ({ params }) => {
  const { questionBankId, questionId } = await params;
  // 获取题库详情
  let bankDetail: API.QuestionBankVO = {};

  let total: number = 0;

  let pageParams = {
    current: 1,
    pageSize: 10,
    sortField: "createTime",
    sortOrder: "descend",
  };

  try {
    const res = await getQuestionBankVoByIdUsingGet({
      id: Number(questionBankId),
      needQueryQuestionList: true,
      ...pageParams,
    });
    bankDetail = res.data as API.QuestionBankVO;
    console.log("questionPage", bankDetail);
    total = res.data.questionPage.total;
  } catch (e: any) {
    // messageApi.error("获取题目列表失败" + e.message);
  }
  // 第一题
  let firstQuestionId = null;

  if (bankDetail) {
    if (
      bankDetail.questionPage?.records &&
      bankDetail.questionPage.records.length > 0
    ) {
      firstQuestionId = bankDetail.questionPage?.records?.[0].id;
    }
  }
  // 获取题库题目详情
  let bankQuestionDetail: API.QuestionVO = {};

  try {
    const res = await getQuestionVoByIdUsingGet({
      id: Number(questionId),
    });
    bankQuestionDetail = res.data as API.QuestionVO;
    // total = res.data.questionPage.total;
  } catch (e: any) {
    // messageApi.error("获取题目列表失败" + e.message);
  }
  type MenuItem = Required<MenuProps>["items"][number];
  // 题目菜单列表
  const questionMenuItemList: MenuItem[] = (
    bankDetail.questionPage?.records || []
  ).map((item) => {
    return {
      label: (
        <Link href={`/bank/${questionBankId}/question/${item.id}`}>
          {item.title}
        </Link>
      ),
      key: item.id || "",
    };
  });

  return (
    <div id="questionBank-question-page" className="max-width-content">
      <Flex>
        <Sider
          width={240}
          theme="light"
          style={{ padding: "24px 0", marginRight: 16 }}
        >
          <Title level={4} style={{ padding: "0 20px" }}>
            {bankDetail.title}
          </Title>
          <Menu items={questionMenuItemList} selectedKeys={[questionId]}></Menu>
        </Sider>
        <Content>
          <QuesionCard question={bankQuestionDetail}></QuesionCard>
        </Content>
      </Flex>
    </div>
  );
};
export default BankQuestionPage;
